<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">设置</h1>
		</header>-->
		
		
		<div class="mui-content" data-menu="menu">
			
			<div class="mui-slider-cell" style="margin: 15px;">
				<div class="oa-contact-cell mui-table">
					<div class="oa-contact-avatar mui-table-cell">
						<img src="../../image/user.png" style="width:60px;height: 60px;" />
					</div>
					<div class="oa-contact-content mui-table-cell">
						<a class="mui-btn mui-btn-negative mui-pull-right" style="display: none;" id="loginBtn" new-window="../2people/login.html">登录</a>
						<div class="mui-clearfix">
							<h4 class="oa-contact-name" id="peopleName">游客</h4>
							<!--
							<span class="oa-contact-position mui-h6">权限受限</span>
							-->
						</div>
						<p class="oa-contact-email mui-h6" id="cellphone">
							权限受限 
						</p>
					</div>
				</div>
			</div>
					
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" new-window="house.html">
						我的房间
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						我的积分
					</a>
				</li>
			</ul>
			
			<ul class="mui-table-view" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" new-window="query.html">
						查询
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						购物订单
					</a>
				</li>
			</ul>
			
			<ul class="mui-table-view" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<a href="" class="mui-navigate-right" onclick="plus.nativeUI.toast('正在建设中');">
						设置
					</a>
				</li>
			</ul>
			<ul class="mui-table-view" style="margin-top: 25px;" id="logout">
				<li class="mui-table-view-cell">
					<a style="text-align: center;color: #FF3B30;">
						退出登录
					</a>
				</li>
			</ul>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/_API.js"></script>
	<script src="../../js/app.js"></script>
	<script>
		mui.init();
		document.getElementById("logout").addEventListener("tap", function(){
			plus.nativeUI.confirm("确定注销帐号？", function(e){
				if(e.index == 1) {
					_API.setPeople();
					plus.storage.removeItem("cellphone");
					plus.storage.removeItem("password");
					freshLogin();
					plus.nativeUI.toast("帐号已注销");
				}
			}, "", ["取消","退出帐号"]);
		});
		
		var freshLogin = function(){
			var p = _API.getPeople();
			if(!p) {
				document.getElementById("loginBtn").style.display = "block";
				document.getElementById("logout").style.display = "none";
				p = {
					"nickname":"游客",
					"cellphone":"权限受限"
				}
			}else {
				document.getElementById("loginBtn").style.display = "none";
				document.getElementById("logout").style.display = "block";
			}
			document.getElementById("peopleName").innerHTML = p.nickname;
			document.getElementById("cellphone").innerHTML = p.cellphone;			
		};
		
		mui.ready(function() {
			freshLogin();
		});
		
		window.addEventListener('app:login',function(event){
			freshLogin();
		});
	</script>
</html>